<template>
    <section class="house-service">
        <div class="container">
            <h2 class="section-title">房产服务</h2>
            <p class="section-desc">我们希望通过服务让您在选择新家的过程中，体验到如同回家般的温馨与舒适，并向一段充满希望和美好的生活新篇章。</p>
            
            <div class="service-grid">
                <div class="service-item">
                    <div class="icon-wrapper">
                        <svg-icon name="house/service/home-1" class="clickable" @click="router.push('/owner/sell')" />
                    </div>
                    <h3>出售您的房屋</h3>
                    <p>我们提供免费评估，确保您在开始出售时了解您房产的真实价值。</p>
                    <a @click.prevent="router.push('/owner/sell')" class="read-more">阅读更多</a>
                </div>
                
                <div class="service-item">
                    <div class="icon-wrapper">
                        <svg-icon name="house/service/home-2" class="clickable" @click="router.push('/agent/apply')" />
                    </div>
                    <h3>成为房产经纪人</h3>
                    <p>我们提供优质资源和专业培训，助您成功开启房产经纪人生涯。</p>
                    <a @click.prevent="router.push('/agent/apply')" class="read-more">阅读更多</a>
                </div>
                
                <div class="service-item">
                    <div class="icon-wrapper">
                        <svg-icon name="house/service/home-3" class="clickable" @click="router.push('/house')" />
                    </div>
                    <h3>购买房屋</h3>
                    <p>我们提供专业咨询，帮您找到理想的居所，实现安居梦想。</p>
                    <a @click.prevent="router.push('/house')" class="read-more">阅读更多</a>
                </div>
                
                <div class="service-item">
                    <div class="icon-wrapper">
                        <svg-icon name="house/service/home-4" class="clickable" @click="router.push('/house/map')" />
                    </div>
                    <h3>免费营销</h3>
                    <p>我们提供专业的房产营销方案，帮助您的房源快速获得更多关注。</p>
                    <a @click.prevent="router.push('/house/map')" class="read-more">阅读更多</a>
                </div>
            </div>
        </div>
    </section>
</template>

<script setup>
import { useRouter } from 'vue-router'

const router = useRouter()
</script>

<style lang="scss" scoped>
.house-service {
    padding: 100px 0;
    background: #F8F9FA;
    --primary-color: #4A60A1;
    --primary-hover: #3D5089;
    
    .container {
        max-width: 1920px;
        margin: 0 auto;
        padding: 0 60px;
    }
    
    .section-title {
        text-align: center;
        font-size: 32px;
        color: #2F3B59;
        margin-bottom: 16px;
    }
    
    .section-desc {
        text-align: center;
        color: #666;
        max-width: 696px;
        margin: 0 auto 40px;
        line-height: 1.6;
    }
    
    .service-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 24px;
        max-width: 1320px;
        margin: 0 auto;
        
        .service-item {
            background: #F8F9FA;
            padding: 32px;
            border-radius: 8px;
            text-align: center;
            transition: background-color 0.3s ease;
            
            &:hover {
                background: #fff;
            }
            
            .icon-wrapper {
                width: 78px;
                height: 78px;
                margin: 0 auto 0;
                display: flex;
                align-items: center;
                justify-content: center;
                
                .svg-icon {
                    width: 78px;
                    height: 78px;
                    color: #4A60A1;
                    transition: color 0.3s;
                    cursor: pointer;
                    
                    &:hover {
                        color: var(--primary-hover);
                    }
                }
            }
            
            h3 {
                font-size: 20px;
                color: #2F3B59;
                margin-bottom: 16px;
            }
            
            p {
                color: #666;
                line-height: 1.6;
                margin-bottom: 24px;
                min-height: 48px;
            }
            
            .read-more {
                color: #4A60A1;
                text-decoration: none;
                font-size: 14px;
                transition: color 0.3s;
                
                &:hover {
                    color: var(--primary-hover);
                }
            }
        }
    }
}
</style> 